<template>
  <vant-form
    ref="form"
    :validate-first="true"
    class="page-p-l page-p-r"
    input-align="right"
    @submit="onSubmit"
  >
    <vant-field
      label="申请单号"
      v-model="form.reqNo"
      placeholder="请输入"
      input-align="right"
      :readonly="true"
      :rules="[{ required:true }]"
    />

    <app-calendar-field
      label="变更后结束日期"
      v-model="form.date"
      placeholder="请选择"
      :rules="[{ required:true }]"
    />

    <app-action-sheet
      v-model="form.xzqhdm"
      label="延期省份"
      :actions="province"
      placeholder="请选择"
      class="van-cell"
      :multiple="true"
      :rules="[{ required:true }]"
    ></app-action-sheet>

    <vant-cell>
      <vant-button round block type="danger">提交</vant-button>
    </vant-cell>
  </vant-form>
</template>

<script>
import { getXzqh } from '@apis/xzqh'
  export default {
    data(){
      const {query:{reqNo='',date=''}}=this.$route
      
      return {
        province:[],//province,//city1.map(item=>({...item,name:item.text})),
        maxRange: 6 * 30,
        form:{
          reqNo,
          date,
          xzqhdm:''
        }
      }
    },
    
    created(){
      this.getXzqh()
    },
    methods:{
      getXzqh() {
      const province = this.$store.getters['xzqh/province']
      if (province.length) {
        this.province = province.map(item=>({...item,name:item.text}));
      } else {
        getXzqh({ lvl: 1 }).then(res => {
          const { data = [] } = res || {};

          this.$store.dispatch('xzqh/setPro', data)
          this.province = data.map(item=>({...item,name:item.text}));
        })
      }
    },
      onSubmit(){
        this.$store.dispatch('search/setRefresh',true)
        this.$router.back();
      }
    }
  }
</script>

<style lang="less" scoped>
</style>